<template>
  <div class="view-wrapper">
    <!-- app-container -->
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="查看日期：" prop="queryDate">
          <el-date-picker v-model="queryParams.queryDate" format="yyyy-MM" value-format="yyyy-MM" type="month"
            placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="直播客户" prop="clientName">
          <el-input v-model="queryParams.clientName" placeholder="请填写" clearable />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <div class="weekHeader">
        <div class="weekitem">周日</div>
        <div class="weekitem">周一</div>
        <div class="weekitem">周二</div>
        <div class="weekitem">周三</div>
        <div class="weekitem">周四</div>
        <div class="weekitem">周五</div>
        <div class="weekitem">周六</div>
      </div>
      <div class="weekCentent">
        <div class="daysList" v-for="(item, index) in tabList" :key="index">
          <div class="tips">
            <div v-if="item.day == '01'" class="num">{{ item.moth }}</div>
            <div class="txt" v-if="item.isToDay">今</div>
            <div class="num" v-else-if="item.day != '01'">{{ item.day }}</div>
          </div>
          <div class="liveBox">
            <div class="liveList" v-for="(aitem, aindex) in item.liveRoomList" :key="aindex" @click="lookClick(aitem)">
              <span class="name">{{ aitem.liveRoomName }}</span>
              <span class="time" style="margin-left: 10px">{{ aitem.liveTime }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btnBot">
      <el-button type="primary" @click="closure">关闭</el-button>
    </div>
    <lookDialog v-bind="$attrs" v-if="dialogVisible" :id="id" :pathType="pathType" :visible.sync="dialogVisible"
      @success="_handleSuccess">
    </lookDialog>
  </div>
</template>
<script>
import {
  workforceCalendar
} from "@/api/customer/scheduleList";  
import {
  calendarList
} from "@/api/customer/rowDateList";
import lookDialog from "./components/lookDialog";

export default {
  name: "",
  components: {
    lookDialog,
  },
  data() {
    return {
      dialogId: "",
      dialogVisible: false,
      // 遮罩层
      loading: false,
      //表格数据
      tabList: [],
      pathType: "add",
      current: "",
      // 查询参数
      queryParams: {
        clientName: '', //直播客户
        queryDate: '', //查看日期 yyyy-MM
        anchorId: '',
      },
      date: [],
      typePath: '',
    };
  },

  created() {
    this.queryParams.anchorId = this.$route.query.id
    this.queryParams.queryDate = this.$route.query.date
    this.typePath = this.$route.query.type

    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      if(this.typePath == 1){
        workforceCalendar(this.queryParams).then((response) => {
          this.tabList = response.result;
        });
      }else if(this.typePath == 2){
        calendarList(this.queryParams).then((response) => {
          this.tabList = response.result;
        });
      }
      
    },
    // 表单重置
    reset() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //查看
    lookClick(row) {
      this.id = row.id;
      this.dialogVisible = true;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.reset();
    },
    // 关闭
    closure() {
      this.$router.back()
    },
    _handleSuccess(e) {
      //成功回调
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px 0;
}

.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px;
  margin-top: 10px;

  .weekHeader {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 48px;
    border-bottom: 1px solid #eee;
  }

  .weekitem {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-weight: bold;
    font-size: 14px;

  }

  .weekCentent {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .daysList {
      width: calc(100% / 7);
      height: 180px;
      border-right: 1px solid #eee;
      border-bottom: 1px solid #eee;

      .tips {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;

        .txt {
          font-size: 20px;
          font-weight: bold;
          color: #46a6ff;
        }

        .num {
          font-size: 20px;
          font-weight: bold;
          color: #333;
        }
      }

      .liveBox {
        padding-left: 10px;
        height: 140px;
        overflow-y: auto;

        .liveList {
          height: 28px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          cursor: pointer;
          .name{
            width: 45%;
            display: block;
            overflow: hidden; /* 确保超出容器的文本被裁剪 */
            white-space: nowrap; /* 确保文本在一行内显示 */
            text-overflow: ellipsis; /* 使用省略号表示文本超出 */
          }
          .time{
            width: 55%;
            display: block;
          }
        }

        .liveList:hover {
          color: #46a6ff;
        }
      }
    }

    .detaList:nth-child(7n) {
      border-right: none;
    }
  }
}

.listBox_head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;

  .right {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
}

.btnBot {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
</style>